<template>
	<view class="index">
		<custom id='head' @toSearchPage='searchPage()' :fontWeight='700' :isSearchShow='true'
			navBackgroundColor='#0065D8' :style="{height:cusHeight+'px'}" textContent='工作台'>
		</custom>

		<view class="indexHead" :style="{top:(cusHeight - 8)+'px'}"></view>
		<view class="dataNow" :style="{top:(cusHeight + 12)+'px'}">
			<view class="gps">
				<image src="../../static/img/gps.png"></image>
				<view class="selectGps">
					<superwei-combox :candidates="candidates" :isJSON="true" keyName="name" placeholder="请选择或输入"
						v-model="inputValue" @input="input" @select="select"></superwei-combox>
				</view>
				<view class="workType" @click="saoma">当前网络:{{workeType}}</view>
			</view>
			<view class="nowData">
				<view class="label">实时总数<span v-if='inputValue'>({{inputValue}})</span></view>
				<view class="number">{{allNumber}}</view>
			</view>
			<view class="fourData">
				<view class="item">
					<view class="number one">{{enterNumber}}</view>
					<view class="label">人脸告警</view>
				</view>
				<!-- <span></span>
				<view class="item">
					<view class="number two">{{outNumber}}</view>
					<view class="label">离场人次</view>
				</view> -->
				<span></span>
				<view class="item">
					<view class="number three">{{faceNumber}}</view>
					<view class="label">人脸抓拍</view>
				</view>
				<span></span>
				<view class="item">
					<view class="number four">{{carNumber}}</view>
					<view class="label">车辆抓拍</view>
				</view>
			</view>

		</view>
		<view class="scrollData" :style="{top:(cusHeight + 212)+'px',maxHeight:scrollHeght+'px'}">
			<tabs :tempIndex='tabIndex' @setType='setTypeData' />
			<view class="content">
				<swiper :current="tabIndex" :style="{height:scrollHeghtTab+'px'}" @change="tabChange">
					<swiper-item>
						<captureInfor v-for='item in dataList' :info="item" @toPage='toPage' />
					</swiper-item>
					<swiper-item>
						<captureInfor v-for='item in faceList' :info="item" @toPage='toPage' />
					</swiper-item>
					<swiper-item>
						<captureInfor v-for='item in carList' :info="item" @toPage='toPage' />
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getImage,
		getName,
		systemInfo
	} from '@/utils/index.js';
	import custom from '../../colorui/commonpent/custom.vue'
	import captureInfor from '../../common/temp.vue'
	import tabs from '../../common/tab.vue';
	import mac from '@/utils/mac.js'

	import {
		MQTT_OPTIONS,
		MQTT_IP
	} from '../../utils/mqttConfig.js'
	import {
		getCache,
		setCache,
		apiUrl
	} from "@/utils/cache.js";

	export default {
		data() {
			return {
				scrollHeght: 0,
				scrollHeghtTab: 0,
				data: 0,

				//下拉刷新的处理
				triggered: false,

				client: null, //mqtt客户端
				switches: 'admin_id', //mqtt主题


				sdList: [],
				candidates: [
					// {
					// 	id: '2',
					// 	name: '选项二',
					// 	disabled: true // 单独设置disabled后即可禁用该选项
					// }
				],
				selectId: 0,
				inputValue: '全部',

				allNumber: 0, //实时总数
				enterNumber: 0, //入场人次
				outNumber: 0, //离开人次
				faceNumber: 0, //人脸抓拍,
				carNumber: 0, //车辆抓拍


				dataList: [{
						id: 0,
						img: 'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
						title: '人脸抓拍1',
						address: '1号通道入口',
						time: '2023-5-25 17:15:55',
						typeBgColor: '2'
					},
					{
						id: 0,
						img: 'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
						title: '人脸抓拍',
						address: '1号通道入口',
						time: '2023-5-25 17:15:55',
						typeBgColor: '2'
					}
				],
				faceList: [{
						id: 0,
						img: 'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
						title: '人脸抓拍1',
						address: '1号通道入口',
						time: '2023-5-25 17:15:55',
						typeBgColor: '2'
					},
					{
						id: 0,
						img: 'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
						title: '人脸抓拍',
						address: '1号通道入口',
						time: '2023-5-25 17:15:55',
						typeBgColor: '2'
					}
				],
				carList: [
					// {
					// 	id: 0,
					// 	img: 'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
					// 	title: '车辆抓拍',
					// 	address: '1号通道入口',
					// 	time: '2023-5-25 17:15:55',
					// 	typeBgColor: '2'
					// }
				],
				tabIndex: 0,

				workeType: ''
			}
		},
		components: {
			custom,
			captureInfor,
			tabs
		},
		onReady() {
			var that = this;
			let systemInfomations = uni.getSystemInfoSync()
			// 机型适配比例系数
			let scaleFactor = 750 / systemInfomations.windowWidth
			// 当前机型-屏幕高度
			let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx

			this.scrollHeght = uni.upx2px(windowHeight) - (this.CustomBar + 230);
			this.scrollHeghtTab = this.scrollHeght - 60;
		},
		onShow() {
			var that = this;
			console.log('asdfasd onShow');
			
			this.getContentData();
			this.getNowData(this.selectId);
			//
			that.workeType = getCache('network');
			// if(that.workeType == ''){
			// 	this.getSystem();
			// 	that.workeType = getCache('network');
			// }
			//console.log('that.workeType',that.workeType);
			uni.onNetworkStatusChange(function(res) { //监听网络状态变化
				that.workeType = getCache('network');
			});
			
			this.getDeviceMac();

		},
		computed: {
			cusHeight() {
				return this.CustomBar;
			}
		},

		async onLoad() {
			this.getContentData();
			// const data = await this.$api.getBanner();
			// this.data = data.code

			// setTimeout(() => {

			// 	console.log('lunbo', data)
			// }, 5000)
			this.connect();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.triggered = true;
			if (this.tabIndex === 0) {
				this.dataList = [];
			} else if (this.tabIndex === 1) {
				this.faceList = [];
			} else if (this.tabIndex === 2) {
				this.carList = [];
			}
			setTimeout(() => {

				uni.stopPullDownRefresh();
				console.log('下拉刷新...');
				this.getContentData();
				this.triggered = false;
			}, 2000)
		},
		//上拉加载
		onReachBottom() {
			this.triggered = true;
			console.log('上拉刷新');
		},
		reload() {
			console.log('asdfas reload');
		},
		methods: {
			goPublish(){
			            //将vue项目引入至安卓代码中，安卓方法暴露在window中，vue中可以直接用window去调取方法。
			            window.android.callAndroidMethod('1','2')
			        },
			saoma(){
						  //调用scanCode实现扫码功能
										uni.scanCode({
											//是否只能从相机扫码,不能从相册扫码
											onlyFromCamera:false,
											//规定扫码类型  
											// barcode就是一维码(条形码)  qrcode就是(er)维码 
											// datamatrix就是Data Matrix码   pdf417就是PDF417条码
											scanType:['barCode','qrCode','datamatrix','pdf417'],
											// 是否启动自动识别字符编码功能
											autoDecodeCharset:false,
											// 是否开启自动放大功能 
											autoZoom:false,
											// 是否支持手动输入条形码  
											barCodeInput:false,
											success: (res) => {
												console.log(res.result);
											},
											fail: (error) => {
			                                    console.log(error)
											}
										})
									},
									
			//mqtt连接
			getDeviceMac() {
				//#ifdef MP-WEIXIN||APP-PLUS
				console.log('mac',mac.address());
				//获取本机Mac地址
				var deviceMac = '';
				var net = plus.android.importClass('java.net.NetworkInterface');
				var wl0 = net.getByName('wlan0');
				var macByte = wl0.getHardwareAddress();
				deviceMac = '';
				for (var i = 0; i < macByte.length; i++) {
					var tmp = '';
					var num = macByte[i];
					if (num < 0) {
						tmp = (255 + num + 1).toString(16);
					} else {
						tmp = num.toString(16);
					}
					if (tmp.length == 1) {
						tmp = '0' + tmp;
					}
					deviceMac += tmp;
				}
				let mac2 = deviceMac;
				for (let i = 2; i < mac2.length; i += 3) mac2 = mac2.slice(0, i) + ':' + mac2.slice(i);
				console.log('mac2地址：',mac2);
				// #endif
			},

			
			isNotifyEnabled() { //是否打开通知权限
				notify.isNotifyEnabled(
					(res) => {
						console.log('asdfasdfasd', res)
						if (res.isNotifyEnabled) {
							uni.showToast({
								title: 'isNotifyEnabled：' + res.isNotifyEnabled ? true : false,
								icon: "none"
							})
						} else {
							this.goSetNotify();
						}

					});
			},
			goSetNotify() { //跳转到通知设置界面
				notify.goSetNotify();
			},
			clear() { //清空某类型消息
				notify.clear({
					'channelID': '0',
					'channelName': 'channel_0',
					'ID': 1,
				});
			},



			getAlarm(areaId) {
				let that = this;
				console.log('asdfasd  id', areaId);
				return;
				uni.request({
					url: apiUrl + '/smartApp/hkSnapMatchAlarm',
					data: {
						areaId: areaId,
						current: 1,
						size: 4,
					},
					header: {
						'Accept': 'application/json',
						'Content-Type': 'application/json',
						'Authorization': getCache('lw-TOKEN'),
					},
					method: "GET",
					success: (response) => {
						console.log('adfas', response.data)
						if (response.data.status === 200) {
							const data = response.data.data.records;

							data.map(item => {
								if (item.alarmStatus === 2) {
									item.typeBgColor = '1'
									item.status = '1'
								} else if (item.alarmStatus === 1) { //未处理
									item.typeBgColor = '0'
									item.status = '0'
								}
								console.log('asdf', item);
								that.dataList.push({
									id: item.id,
									img: item
										.smallUrl, //https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
									title: item.name,
									address: item.deviceName,
									time: item.alarmTime,
									status: item.status,
									alarmStatus: item.alarmStatus,
									typeBgColor: item.typeBgColor,
									areaId: areaId,
								})
							})


						}


					},
					fail: (error) => {
						uni.showToast({
							title: '登录失败',
							duration: 1000
						})
					},
				});


			},

			getNowData(areaId) {
				let that = this;
				return;
				uni.request({
					url: apiUrl + '/smartApp/area/getAreaStatistics',
					data: {
						areaId: areaId,
					},
					header: {
						'Accept': 'application/json',
						'Content-Type': 'application/json',
						'Authorization': getCache('lw-TOKEN'),
					},
					method: "GET",
					success: (response) => {
						console.log('adfas 总数', response.data)
						if (response.data.status === 200) {
							const data = response.data.data;
							this.allNumber = data.total; //实时总数
							this.enterNumber = data.enter; //入场人次
							this.outNumber = data.exit; //离开人次
							this.faceNumber = data.faceNum; //人脸抓拍,
							this.carNumber = data.carNum; //车辆抓拍	
						}


					},
					fail: (error) => {
						uni.showToast({
							title: '登录失败',
							duration: 1000
						})
					},
				});


			},



			getData() {
				let that = this;
				return;
				uni.request({
					url: apiUrl + '/smartApp/area/getAreaList',
					data: {},
					header: {
						'Accept': 'application/json',
						'Content-Type': 'application/json',
						'Authorization': getCache('lw-TOKEN'),
					},
					method: "GET",
					success: (response) => {
						if (response.data.status === 200) {
							that.candidates = [{
								id: 0,
								name: '全部'
							}];
							const data = response.data.data;
							data.map(item => {
								that.candidates.push({
									id: item.id,
									name: item.areaName,
								})
							})
						}
					},
					fail: (error) => {
						uni.showToast({
							title: '失败',
							duration: 1000
						})
					},
				});
			},
			getContentData() {
				this.getData();
				// if (this.tabIndex === 0) {
				this.dataList = [];
				// } else if (this.tabIndex === 1) {
				this.faceList = [];
				// } else if (this.tabIndex === 2) {
				this.carList = [];
				// }
				let data = [{
						id: 0,
						img: 'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
						title: '非法闯入',
						address: '1号通道入口',
						time: '2023-5-25 17:15:55',
						status: '0',
						typeBgColor: '2'
					},
					{
						id: 0,
						img: 'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
						title: '非法闯入',
						address: '1号通道入口',
						time: '2023-5-25 17:15:55',
						status: '0',
						typeBgColor: '2'
					},
					{
						id: 0,
						img: 'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
						title: '非法闯入',
						address: '1号通道入口',
						time: '2023-5-25 17:15:55',
						status: '0',
						typeBgColor: '2'
					},
					{
						id: 0,
						img: 'https://img0.baidu.com/it/u=4143210851,2046129875&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
						title: '非法闯入',
						address: '1号通道入口',
						time: '2023-5-25 17:15:55',
						status: '0',
						typeBgColor: '2'
					},
				]
				data.map((item) => {
					item.typeBgColor = '2'
					this.dataList.push(item);
					this.faceList.push(item);
					this.carList.push(item)
				})

			},
			input(e) {
				console.log(e) // 选项一
			},
			select(e) {
				this.selectId = e.id;
				this.getNowData(e.id);
				this.getContentData();
				console.log('安慰訪問', e) // {id: '1',name: '选项一'}
			},
			searchPage() {
				uni.navigateTo({
					url: '/pages/search/search?type=' + this.tabIndex
				})
			},
			toPage(e) {
				console.log('asdfa', e);
				let url = '/pages/alarmDetail/alarmDetail?id=' + e.id + '&areaId=' + e.areaId;
				if (e.status === '0') {
					url = '/pages/alarmHandle/alarmHandle?id=' + e.id + '&areaId=' + e.areaId;
				}
				uni.navigateTo({
					url: url
				})
			},
			tabChange(e) {
				console.log(e);
				this.tabIndex = e.detail.current;
				console.log('asdfa', this.tabIndex);
			},
			setTypeData(val) {
				this.tabIndex = val;
				console.log('adfad', val);
			},
			setddd() {
				this.tabIndex = 2;
			},


			scrollLower() {
				console.log('上拉刷新');
			},
			onRefresh() {
				console.log('下拉刷新');
			},



			//测试mqtt连接
			connect() {
				var that = this
				//h5的连接是 'ws://' + url。
				// #ifdef H5 
				that.client = this.$mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
				// #endif 
				//app的连接是 'wx://' + url。
				//#ifdef MP-WEIXIN||APP-PLUS
				that.client = this.$mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
				// #endif
				that.client.on('connect', function() {
					console.log('连接成功', that.client)
					//that.switches 这是订阅主题名称 和接口地址差不多，是他们定义的，直接拿过来用就行，订阅成功后，就可以接收这个的信息了
					that.client.subscribe(that.switches, function(err) {
						if (!err) {
							console.log('switches订阅成功')
						}
					});

				}).on('reconnect', function(error) {
					console.log('正在重连...', that.switches)
				}).on('error', function(error) {
					console.log('连接失败...', error)
				}).on('end', function() {
					console.log('连接断开')
				}).on('message', function(topic, message) {
					console.log('message');
					console.log(topic, message);
					// 统一接受信息。 topic 是订阅的主题名称，message是监听信息的接收和发送都能接收

				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #F9F8FA;
		z-index: -1;
		height: 100%;

		.scrollData {
			margin: auto 4%;
			width: 92%;
			// height: 360px;
			border-radius: 5px;

			position: fixed;
			background-color: #fff;
			margin-top: 14px;

			.content {
				padding: 0px 20px;
			}

		}

		.dataNow {
			margin: auto 4%;
			width: 92%;
			height: 200px;
			border-radius: 5px;
			z-index: 9999;
			position: fixed;
			background-color: #fff;

			.fourData {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 0 10px;
				text-align: center;

				span {
					width: 1px;
					height: 19px;
					background-color: #F0F0F0;
				}

				.number {
					font-size: 20px;
					font-weight: bold;

					&.one {
						color: #00ABBF;
					}

					&.two {
						color: #00B27C;
					}

					&.three {
						color: #F5C400;
					}

					&.four {
						color: #EE7F00;
					}
				}

				.label {
					color: #666666;
					font-size: 12px;
				}
			}

			.nowData {
				background: url(../../static/img/nowData_bg.png) no-repeat;
				background-size: 100% 100%;
				margin: 0px 10px;
				height: 112px;
				position: relative;
				margin-top: -8px;
				color: #fff;

				.label {
					position: absolute;
					top: 16px;
					left: 28px;
					font-size: 16px;

					span {
						font-size: 12px;
						color: rgba(255, 255, 255, 0.8);
					}
				}

				.number {
					position: absolute;
					bottom: 16px;
					right: 24px;
					font-size: 30px;
					font-weight: 600;

				}
			}

			.gps {
				display: flex;
				align-items: center;
				padding: 1.5px 14px;
				position: relative;

				.workType {
					position: absolute;
					right: 20px;
					font-size: 14px;
				}

				.selectGps {
					width: 140px;

				}

				image {
					width: 16px;
					height: 16px;
				}
			}
		}

		.indexHead {
			width: 100%;
			height: 60px;
			background-color: #0065D8;
			border-bottom-left-radius: 22px;
			border-bottom-right-radius: 22px;
			position: fixed;
		}

		.main-container {
			position: relative;
			margin: auto 40rpx;

			.item-box {
				display: flex;
				padding: 16rpx 0;
				align-items: center;
				position: relative;

				.headimg {
					width: 120rpx;
					height: 120rpx;
					margin: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.label {
					position: absolute;
					right: 0rpx;
					top: 10rpx;
				}

				.info {
					color: #c1c0be;

					.info-name {
						color: #737272;
						margin-bottom: 12rpx;
					}
				}

			}
		}


	}

	/deep/ ::-webkit-scrollbar {
		//隐藏scroll-view里面自带的滚动条
		display: block; //必加
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: auto !important;
		background: transparent;
		overflow: auto !important;
	}
</style>
<style>
	.uni-select {
		border: 1px solid #fff !important;

	}
</style>